<template>
    <div class="nav-menu-container">
        <router-link
            v-for="(item, index) in routes"
            :key="index"
            :exact="item.exact"
            :to="{ name: item.name }"
            active-class="selected"
            exact-active-class=""
        >
            <Icon :type="item.icon" />{{ item.title }}
        </router-link>
    </div>
</template>
<script>
import Icon from "@/components/Icon";
export default {
    name: "",
    props: {},
    components: {
        Icon,
    },
    data() {
        return {
            routes: [
                {
                    name: "Home",
                    title: "首页",
                    icon: "home",
                    exact: true,
                },
                // {
                //     name: "Blog",
                //     title: "文章",
                //     icon: "blog",
                //     exact: false, // 激活状态是否要精确匹配
                // },
                {
                    name: "About",
                    title: "关于我",
                    icon: "about",
                    exact: true,
                },
                {
                    name: "Project",
                    title: "项目&效果",
                    icon: "code",
                    exact: true,
                },
            ],
        };
    },
    created() {},
    mouted() {},
    computed: {},
    watch: {},
    methods: {},
};
</script>
<style lang="less" scoped>
.nav-menu-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: 20px;
    box-sizing: border-box;
    justify-content: center;
    a {
        height: 50px;
        line-height: 50px;
        border-radius: 12px;
        font-size: 20px;
        background: linear-gradient(60deg, #29323c 0%, #485563 100%);
        padding-left: 30px;
        color: #bcc5ce;
        &:hover {
            color: #fff;
        }
        &.active {
            border: 1px solid #fff;
        }
        i {
            margin-right: 10px;
        }
    }
}
</style>
